<template>
  <table class="table-show-table table-show-split-color">
    <thead class="table-show-th">
      <tr class="table-show-th-tr">
        <td class="table-show-th-td table-show-th-td1">类别</td>
        <td class="table-show-th-td table-show-th-td2">书名</td>
        <td class="table-show-th-td table-show-th-td3">最新章节</td>
        <td class="table-show-th-td table-show-th-td4">更新时间</td>
        <!-- <td class="table-show-th-td table-show-th-td5">书签</td> -->
        <td class="table-show-th-td table-show-th-td6" v-if="operation">操作</td>
      </tr>
    </thead>
    <tbody class="table-show-tb">
      <tr class="table-show-tb-tr" v-for="item in bookList" :key="item.bookId">
        <td class="table-show-tb-td table-show-tb-td1">[{{item.catName}}]</td>
        <td class="table-show-tb-td table-show-tb-td2"><router-link :to="'/index/bookDetail?id='+item.bookId" :target="global.goBookDetailType">{{item.bookName}}</router-link></td>
        <td class="table-show-tb-td table-show-tb-td3"><router-link :to="'/index/bookDetail?id='+item.bookId" :target="global.goBookDetailType">{{item.lastIndexName}}</router-link></td>
        <td class="table-show-tb-td table-show-tb-td4">{{item.lastIndexUpdateTime}}</td>
        <!-- <td class="table-show-tb-td table-show-tb-td5">继续阅读</td> -->
        <td class="table-show-tb-td table-show-tb-td6" v-if="operation" @click="removeItem(item)">移除</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props:{
    bookList:Array,
    operation:{
      type:Boolean,
      default:false
    },
    showType:String,//'shelf','blacklist'
  },
  methods:{
    removeItem(item){
      this.$confirm('是否确定移除['+item.bookName+']？', '提示', {
        customClass:"el-message-box_custom",
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('removeitem', item.bookId);
      }).catch(() => {
      });
    }
  }
}
</script>

<style lang='scss' scoped>
.table-show-split-color{
  thead tr:nth-child(odd){
    background: #F9F9F9;
  }
  tbody tr:nth-child(even){
    background: #F9F9F9;
  }
}
.table-show-table {
  font-size: 12px;
  width: 100%;
  table-layout:fixed;
  line-height: 35px;
  border-collapse:collapse;
  .table-show-th {
    .table-show-th-tr {
      border: 1px solid #E9E9E9;
      border-width: 1px 0 0 0;
      .table-show-th-td{
        padding: 0 10px;
        color: #333;
      }
      .table-show-th-td1 {
        width: 80px;
      }
      .table-show-th-td2 {
        width: 160px;
      }
      // .table-show-th-td3 {

      // }
      .table-show-th-td4 {
        width: 100px;
      }
      .table-show-th-td5 {
        width: 60px;
      }
      .table-show-th-td6 {
        width: 40px;
      }
    }
  }
  .table-show-tb {
    .table-show-tb-tr {
      // border: 1px solid #E9E9E9;
      // border-width: 0 0 1px 0;
      .table-show-tb-td{
        padding: 0 10px;
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .table-show-tb-td1 {
        color: #888;
      }
      // .table-show-tb-td2 {

      // }
      .table-show-tb-td3, .table-show-tb-td3 a{
        color: #666;
      }
      .table-show-tb-td3 a:hover{
        color: $base-color;
      }
      .table-show-tb-td4 {
        color: #888;
      }
      .table-show-tb-td5 {
        color: #333;
      }
      .table-show-tb-td6 {
        cursor: pointer;
        color: #333;
      }
      .table-show-tb-td6:hover{
        color: $base-color;
      }
    }
  }
}
</style>